revision:
is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting. It defines a distant light source that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
create and add this object with the >method feDistantLight() of the filter primitives feDiffuseLighting or feSpecularLighting.
attributes: azimuth, elevation
codes:
<svg viewBox="0 0 440 200"> <filter id="distantLight1"> <feDiffuseLighting> <feDistantLight azimuth="0" /> </feDiffuseLighting> </filter> <filter id="distantLight2"> <feDiffuseLighting> <feDistantLight elevation="45" /> </feDiffuseLighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantLight2); transform: translateX(240px);" /> </svg>
is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting". It defines a light source which allows to create a point light effect. It can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
create and add this object with the method fePointLight() of the filter primitives feDiffuseLighting or feSpecularLighting.
attributes: x, y, z
codes:
<svg width="300" height="250"> <defs> <filter id="spotlight"> <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" lighting-color="#FFF"> <fePointLight x="40" y="30" z="220"/> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image href="smiley.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg>
is a child element of the filter primitives "feDiffuseLighting" or "feSpecularLighting". It defines a light source that can be used to create a spotlight effect. It is used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
create and add this object with the method feSpotLight() of the filter primitives feDiffuseLighting or feSpecularLighting.
attributes: x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent, limitingConeAngle
codes:
<svg width="300" height="300"> <defs> <filter id="spotlight_a"> <feSpecularLighting result="spotlight_a" specularConstant="1.5" specularExponent="4" lighting-color="#FFF"> <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image href="smiley.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight_a);"/> </svg>